﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>火车票筛选</title>
    <meta charset="utf-8" />
    <script src="/ThirdParty/jquery/1.11.0/jquery.min.js"></script>
    <link href="/ThirdParty/DataTables/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="/ThirdParty/DataTables/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="/ThirdParty/xdate/xdate.js"></script>
    <link rel="stylesheet" type="text/css" href="/ThirdParty/easyui/1.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/ThirdParty/easyui/1.5/themes/icon.css">
    <script src="ThirdParty/easyui/1.5/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="ThirdParty/easyui/1.5/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
</head>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>搜索</legend>
        <form method="post" id='ff'>
        <div class="layui-inline">
            出发站：
            <input type="type" id="chufa" name="chufa" value="" class="layui-input" />
            到站：
            <input type="type" id="daoda" name="daoda" value="" class="layui-input" />
            日期：
            <input id="riqi" name="riqi" type="text" class="easyui-datebox" required="required" placeholder="出发日期">
            <button  type="button" id="btnSeach">
                查询</button>
        </div>
        </form>
    </fieldset>
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>
                    车号
                </th>
                <th>
                    起点站
                </th>
                <th>
                    终点站
                </th>
                <th>
                    出发站
                </th>
                <th>
                    到站
                </th>
                <th>
                    出发时间
                </th>
                <th>
                    下车时间
                </th>
                <th>
                    车型
                </th>
                <th>
                    历时
                </th>
                <th>
                    能否网页购买
                </th>
                <th>
                    一等座
                </th>
                <th>
                    二等座
                </th>
                <th>
                    无座
                </th>
            </tr>
        </thead>
    </table>
 
</body>
</html>
<script>
    var stations;
    $(document).ready(function () {
        $('#chufa').combobox({
            url: '/station.json', method: 'get',
            //data: rps,
            valueField: 'Code',
            textField: 'NameCN',
            filter: function (q, row) {
                var opts = $(this).combobox('options');
                return row[opts.textField].indexOf(q) > -1 || row.NameE.indexOf(q) > -1;
            }
        });
        $('#daoda').combobox({
            url: 'station.json', method: 'get',
            //data:rps,
            valueField: 'Code',
            textField: 'NameCN',
            filter: function (q, row) {
                var opts = $(this).combobox('options');
                return row[opts.textField].indexOf(q) > -1 || row.NameE.indexOf(q) > -1;
            }
        });

        //获取所有站名
        //$.getJSON("/station.ashx", function (rps) {

        //   stations = rps;



        //});


        /*
        $.getJSON("/Handler1.ashx", function (rps) {
        //console.log(rps);
        SetData(rps.data);

        });
        */
        initDataTable();

        $('#btnSeach').click(function () {

        /*
            $.post("/Handler1.ashx", $("form").serializeArray(), function (rps) {
                console.log(rps);
                SetData(rps);

            }); */
        });


    });
    function initDataTable() {
        $('#example').DataTable({
            "ajax": "/Handler1.ashx",
            serverSide: true,
            dataSrc: 'data',
            //"data": data,
            "columns": [
                  { "data": "queryLeftNewDTO.station_train_code" }, //
                {"data": "queryLeftNewDTO.start_station_name" },
                { "data": "queryLeftNewDTO.end_station_name" },
                { "data": "queryLeftNewDTO.from_station_name" },
                { "data": "queryLeftNewDTO.to_station_name" },


                { "data": "queryLeftNewDTO.start_time" },
                { "data": "queryLeftNewDTO.arrive_time" },
                { "data": "queryLeftNewDTO.train_class_name" }, //类型 动车
                {"data": "queryLeftNewDTO.lishi" }, //历时
                {"data": "queryLeftNewDTO.canWebBuy" }, //能否网页购买

                  {"data": "queryLeftNewDTO.zy_num" }, //一等座
                    {"data": "queryLeftNewDTO.ze_num" }, //二等座
                        {"data": "queryLeftNewDTO.wz_num" }, //无座              "wz_num": "有",

            ],
            "oLanguage": {
                "sProcessing": "正在加载中......",
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "对不起，查询不到相关数据！",
                "sEmptyTable": "表中无数据存在！",
                "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
                "sSearch": "搜索",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "末页"
                }
            } //多语言配置

        });
    }
    function SetData(data) {
        var table = $('#example').DataTable({ data: data ,
        "serverSide": true,
        "ajax": "../server_side/scripts/server_processing.php"
        });

        //table.data = data;
    }         
</script>
